import qs from 'qs';
import { useCallback } from 'react';
import * as auth from '../auth-provider'
import { useAuth } from '../context/auth-context';

const apiUrl = process.env.REACT_APP_API_URL;

interface Config extends RequestInit{
    token?:string,
    data?:object
}

export const http = async (endpoint:string,{data,token,headers,...customConfig}:Config={})=>{
    const config = {
        method: 'GET',
        headers:{
            Authorization: token ? `Bearer ${token}` : '',
            'Content-Type' : data ? 'application/json' : ''
        },
        ...customConfig
    }

    if(config.method.toUpperCase() === 'GET'){
        endpoint += `?${qs.stringify(data)}`;
    }else{
        config.body = JSON.stringify(data || {});
    }

    return fetch(`${apiUrl}/${endpoint}`,config)
    .then(async response=>{
        if(response.status === 401){
            await auth.logout();
            window.location.reload();
            return Promise.reject({message:'请重新登录'});
        }
        const data = await response.json();
        if(response.ok){
            return data;
        }else{
            return Promise.reject(data);
        }
    });
}

export const useHttp = ()=>{
    const {user} = useAuth();
    // 这句话可以优化成下面的写法，因为这两个变量的类型和http参数的类型一样
    // return ([endpoint,config]:[string,Config])=> http(endpoint,{...config,token:user?.token});
    return useCallback((...[endpoint,config]:Parameters<typeof http>)=> http(endpoint,{...config,token:user?.token}),[user?.token]);
}